import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';
import { Tabs, WhiteSpace, Badge, Button } from 'antd-mobile';
import './../css/menu1.css';
import List from './list.js';
const tabs = [
    { title: <Badge >发现小游记</Badge> },
    { title: <Badge >旅行口袋书</Badge> },
    { title: <Badge >我要写游记</Badge> },
    // dot
];import './../css/menu1.css';
class Tabes extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return <div className='menu-box'>
            <Tabs tabs={tabs}
                initialPage={0}
                onChange={(tab, index) => { console.log('onChange', index, tab); }}
                onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
            >
            <div style={{  height: '450px', backgroundColor: '#fff' }}>
            <Submenu/>
            <List/>
            </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
                   可以是静态页面
            </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
                    啦啦啦啦
            </div>
            </Tabs>
            <WhiteSpace />
            {/* <div className='star-five'> */}
                {/* <div className='star-six'>
                   
                </div >
                <div className='star-six:after'></div> */}
            {/* </div> */}
           
            {/* <Tabs tabs={tabs2}
                initialPage={1}
                tabBarPosition="bottom"
                renderTab={tab => <span>{tab.title}</span>}
            >
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
                    Content of first tab
            </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
                    Content of second tab
            </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
                    Content of third tab
            </div>
            </Tabs>
            <WhiteSpace /> */}
        </div>
    }
}
export default Tabes;

// Submenu
const subdata=[
    {key:'cf',title:'国外旅行地'},
    {key:'gn',title:'国内旅行地'},
    // {key:'gw',title:'出发时间'}
]
const time=[
    {key:'01',title:'1月'},
    {key:'02',title:'2月'},
    {key:'03',title:'3月'},
    {key:'04',title:'4月'},
    {key:'05',title:'5月'},
    {key:'06',title:'6月'},
    {key:'07',title:'7月'},
    {key:'08',title:'8月'},
    {key:'09',title:'9月'},
    {key:'10',title:'10月'},
    {key:'11',title:'11月'},
    {key:'12',title:'12月'},
    {key:'13',title:'确定'},
]
class Submenu extends Component{
    constructor(props){
        super(props);
        this.handClick=this.handClick.bind(this);
        this.data={
            index:'',
            isData:'0'
        }
        this.state={
            show:true,
            timeShow:true
        }

    }
    handClick(evt){
        this.data.index=evt.currentTarget.dataset.id;
        // debugger
        this.setState({
            show:false,
            timeShow:false
        })
    }
    render(){
        let fontPortrait;
        let subList  
        subList=subdata.map((vla,index)=>{
            let stylePortrait;
            if(this.data.index==index){
                stylePortrait = {
                    background: '#479ee5',
                    color: '#fff'
                }
            }

            return <li key={index} style={stylePortrait} onClick={this.handClick} data-id={index}>{vla.title}</li>
        })
        let timeData
        // debugger
        if(this.state.timeShow){
            timeData =time.map((value,index)=>{
                if(index==6){
                    return <div>
                            <li key={index}>{value.title}</li>
                        </div>
                }
                return <li key={index}>{value.title}</li>
            
                })
            }
        return<div style={{ paddingBottom:'15px'}}>
                 <ul className="submenu-box">
                    {subList}
                </ul>
            {
                this.data.index==2&&<div>
                    <ul className='sub-box'>
                        {timeData}
                    </ul>
                </div>
            }
            </div>
    }
}